<template>
  <view class="page-collect">
    <!-- 菜单 -->
    <view class="page-header-tabs">
      <uiTabs
        customClass="collect-tabs"
        navPerView="auto"
        v-model="activeIndex"
        :height="98"
        :line="false"
        :lineHeight="8"
        lineWidth="36rpx"
        color="#7b8196"
        activeColor="#f54305"
        @change="handleChangeTabs"
      >
        <uiTabsItem title="全部课程"></uiTabsItem>
      </uiTabs>
    </view>
    <view class="page-scroll">
      <uiScroll
        top="102rpx"
        ref="mescrollRef"
        @init="mescrollInit"
        :down="downOption"
        :up="upOption"
        @up="loadOrderListData"
      >
        <uiSwipeAction>
          <uiSwipeActionItem
            class="collect-lesson-swipe-box"
            :options="swipeActionOption"
            @click="handleClick(item , index)"
            v-for="(item, index) in list"
            :key="index"
          >
            <view class="collect-lesson ui-1px-b">
              <lessonRow
                :lessonId="item.lessonId"
                :lessonPicPath="item.lessonPic"
                :lessonName="item.lessonName"
                :lecturePic="item.lecturePic"
                :lecturerName="item.lecturerName"
                :lessonPrice="item.lessonPrice"
                :clickNum="item.clickNum"
                :subNum="item.subNum"
                :isVipLesson="item.isVipLesson"
                :lessonCheapPrice="item.lessonCheapPrice"
                class="collect-lesson--lesson"
              ></lessonRow>
            </view>
          </uiSwipeActionItem>
        </uiSwipeAction>
      </uiScroll>
    </view>
  </view>
</template>

<script>
import uiScroll from "@/components/base/scroll/mescroll-body";
import uiScrollMixins from "@/components/base/scroll/mescroll-mixins.js";
import { loadCollectLessonAPI, hasCancelCollect } from "api/order/profile.js";
import uiTabs from "@/components/base/tabs/index";
import uiTabsItem from "@/components/base/tabs-item/index";
import uiButton from "@/components/base/button/index";
import { url } from "@/utils/url.js";
import uiSwipeAction from "@/components/base/swipe-action/index";
import uiSwipeActionItem from "@/components/base/swipe-action-item/index";

import lessonRow from "@/components/business/lession/lession-row-basic";

export default {
  name: "orderManagePage",
  components: {
    uiScroll,
    uiTabs,
    uiTabsItem,
    lessonRow,
    uiButton,
    uiSwipeAction,
    uiSwipeActionItem
  },
  mixins: [uiScrollMixins],
  data() {
    return {
      // 下拉刷新的常用配置
      downOption: {
        use: false, // 是否启用下拉刷新; 默认true
        auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
        native: false // 启用系统自带的下拉组件,默认false;仅mescroll-body生效,mescroll-uni无效(native: true, 则需在pages.json中配置"enablePullDownRefresh":true)
      },
      // 上拉加载的常用配置
      upOption: {
        use: true, // 是否启用上拉加载; 默认true
        auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
        textNoMore: "没有更多数据",
        page: {
          num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
          size: 5, // 每页数据的数量,默认10
          totalPage: 1
        },
        empty: {
          tip: "暂无相关数据"
        }
      },
      // 当前页面查询的参数
      activeIndex: 0,
      list: [],
      swipeActionOption: [
        {
          text: "取消收藏",
          style: {
            backgroundColor: "#F54305"
          }
        }
      ]
    };
  },
  created() {
    // this.loadRecommended();
  },

  methods: {
    loadOrderListData(page) {
      let pageNum = page.num; // 页码, 默认从1开始
      let pageSize = page.size; // 页长, 默认每页10条
      var params = {
        page: {
          currentPage: page.num,
          pageNumber: pageSize
        }
      };
      var _this = this;
      loadCollectLessonAPI(params).then(({ respCode, respMsg, result }) => {
        this.isloading = false;
        if (respCode !== "0") {
          // 加载失败
          this.$toast.fail(respMsg);
          return;
        }
        if (page.num == 1) this.list = []; //如果是第一页需手动置空列表
        this.list = this.list.concat(result.list); //追加新数据
        this.mescroll.endByPage(this.list.length, result.page.totalPage);
      });
    },

    handleChangeTabs() {
      this.list = [];
      this.upOption.page.num = 0;
      this.loadOrderListData(this.upOption.page);
    },

    /**
     *
     * 点击取消收藏
     */
    handleClick(item, $index) {
      let _this = this;
      uni.showModal({
        title: "取消收藏",
        content: "此操作将取消收藏, 是否继续?",
        success: function(res) {
          if (res.confirm) {
            hasCancelCollect({ collectFlag: 0, lessonId: item.lessonId }).then(
              ({ respCode, respMsg, reset }) => {
                if (respCode == 0) {
                  _this.$toast({
                    message: "已取消收藏！"
                  });
                }
                // 移除当前选项
                _this.list.splice($index, 1);
                // _this.getCollectLesson({
                //   num: 0,
                //   size: 5
                // });
              }
            );
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        }
      });
    }
  }
};
</script>

<style scoped lang="scss" >
.page-header-tabs {
  z-index: 10;
  position: fixed;
  top: --window-top; /* css变量 */
  left: 0;
  width: 100%;
  height: auto;
  padding: 0 30rpx;
  background-color: white;
}

.page-scroll {
  background-color: $fill-base;
  .collect-lesson-swipe-box {
    min-width: 100%;
  }
}

.collect-vip {
  position: relative;
  padding: 0 30rpx 6rpx;
  height: 80rpx;
  .collect-vip--background {
    float: left;
    width: 690rpx;
    height: 80rpx;
    z-index: 0;
  }

  >>> .collect-btn {
    position: absolute;
    top: 17rpx;
    right: 40rpx;
    height: 46rpx;
  }
}

.collect-lesson {
  padding: 32rpx 0;
  min-width: 100%;
  .collect-lesson--lesson {
    width: 690rpx;
  }
}

>>> .collect-tabs {
  .s-tab-nav {
    font-size: 28rpx;
    font-weight: 500;
    color: #7b8196;
    background-color: #f3f3f4;
    border-radius: 28rpx;
    padding: 14rpx 20rpx;
    height: 56rpx;
    margin: 16rpx 0;
    &.is-active {
      font-size: 28rpx;
      font-weight: 500;
      color: #f54305;
      background-color: #f3d8cf;
    }
  }
}
</style>
